<#assign menuId=4>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>大货详情</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- bootstrap 3.0.2 -->
    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="../css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />
    <link href="../css/myself.css" rel="stylesheet" type="text/css" />

    <link href="../css/myself.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../css/reset.css" />
    
    <script type="text/javascript" src="../js/lib/jquery.min.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
            margin-top: 10px;
        }
        .pull-left{
            border-left: 6px solid #3882FF;
            padding: 0 5px;
        }
        .custormView{
            margin-top: 10px;
        }
        .red{
            color: red;
        }
        .clear{
            clear: both;
            width: 100%;
            height: 1px;

        }
        .breadcrumb>span{
            margin-right: 20px;
        }
        .six-font{
            font-size: 14px;
        }
        .six-font>span{
            font-size: 16px;
        }
        .clearfix>span>a{
            margin-left: 10px;
            margin-top: 1px;
            float: left;
        }
        .pull-left {
            border-left: 6px solid #3882FF;
            padding: 0 5px;
        }
        input[type="checkbox"]{margin-right: 5px;}
        .right-text .pull-right:last-child{margin-right: 3rem;}
        .table .r_pic{width: 50px;height: 50px;display: inline-block;border: 1px solid #99D3F5;}
        .left-text span{margin-right: 10px;}
        .progressChart{width: 100%;margin: 20px 0;}
        .progressChart .chart_item{}
        .progressChart .chart_item:first-child >div{width: 90px;float:left;text-align: center;}
        .progressChart .chart_item:first-child {margin-left: 12%;height: 20px;}
        .progressChart .content_left{width: 12%;height: 120px;background: #ccc;text-align: center;}
        .progressChart .content_left img{width: 73%;height: 100px;margin: 0 auto;background: white;display: block;margin-top: 3px;}
        .progressChart .content_left p{background: #ccc;}
        .progressChart .content_right{width: 85%;height: 130px;}
        .progressChart .content_right .table{width: 95%;margin-top: 40px;border: none;}
        .progressChart .content_right .table tr{height: 33%;}
        .progressChart .content_right .table tr:first-child{height: 50px;}
        .progressChart .content_right .table td{position: relative;border: none;}
        .progressChart .content_right .unit{position: absolute;top: -7.5px;left: -5px;;width: 30px;height: 30px;border-radius: 50%;background: #e4e4e4;transform: translateY(-50%);}
        .progressChart .content_right .unit2{background:#13c691;width: 20px;height:20px;top:15px;left: 5px;}
        .progressChart .content_right .unit3{position: absolute;height: 8px;width: 650px;background: #13c68f;z-index: 999;top:-11px;left: 19px;}
        .progressChart .content_right .unit5{position: absolute;height: 15px;width: 650px;background: #e4e4e4;z-index: 0;top:-14px;left: 19px;}
        .progressChart .content_right .unit4{position: absolute;z-index: 999;top: -58px;left: -40px;width: 100px;text-align: center;font-weight: bold;}
        .progressChart .content_right .unit p{position: absolute;left: 5px;top: 3.5rem;transform: translateX(-40%);width: 100px;text-align: center;}
    
    	/*新增样式*/
		.ol_left{
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding: 0;
        }
        .ol_left>li{
            float: left;
            margin-right: 5px;
        }
        .ol_left li, .ol_left{
        	margin-bottom: 0;
        }
    	
    	/* 下载和上传按钮样式 */
        .down{
			width: 90px;
			height: 30px;
			border: 1px solid #99D3F5;
			color: #1E88C7;
			display: inline-block;
			text-align: center;
			border-radius: 2px;
			margin-left: 10px;
		}
		.down-i{
			color: #1E88C7;
		}
   	
    	
/*common*/
.p_center{text-align: center;}
.btn_white{background:white;border: 1px solid #cfd8e3;color: #747e8d;}
.btn_white:hover{background:white;border: 1px solid #3794ff;color: #56a4ff;}
.r_textarea{width: 100%;resize: none;border: 1px solid #999;padding: 1em 1em;}
.holder:hover{cursor: pointer;}
.grey{color: #ddd;}
.red{color: red;}



/*padding && margin*/
.ml_5{margin-left:5px; }
.mr_5{margin-right:5px; }
.m_5{margin:0 5px; }
.ml_10{margin-left:10px; }
.mr_10{margin-right:10px; }
.m_10{margin:0 10px; }
.ml_15{margin-left:15px; }
.mr_15{margin-right:15px; }
.m_15{margin:0 15px; }
.ml_20{margin-left:20px; }
.mr_20{margin-right:20px; }
.m_20{margin:0 20px; }
.ml_25{margin-left:25px; }
.mr_25{margin-right:25px; }
.m_25{margin:0 25px; }

.pl_5{margin-left:5px; }
.pr_5{margin-right:5px; }
.p_5{margin:0 5px; }
.pl_10{margin-left:10px; }
.pr_10{margin-right:10px; }
.p_10{margin:0 10px; }
.pl_15{margin-left:15px; }
.pr_15{margin-right:15px; }
.p_15{margin:0 15px; }
.pl_20{margin-left:20px; }
.pr_20{margin-right:20px; }
.p_20{margin:0 20px; }
.pl_25{margin-left:25px; }
.pr_25{margin-right:25px; }
.p_25{margin:0 25px; }



/*大货弹窗*/
.stopWarn p{color: #999;}
.stopWarn h1{font-size: 18px;line-height: 2em;height: 2em;}
.label_text{padding-bottom: 1em;}
.r_box{padding: 2rem;width: 30%;border:1px solid #999;position:fixed;left:0;bottom: 0;right: 0;top:0;margin: auto;background: white;height: 40%;display:none;}
.r_box label{display: block;}
.r_box .title{height: 2.5em;}
.r_radio{width: 30%;text-align:center}
.r_radio input{margin: 0 1rem;}
.r_btn_wrap{margin-top: 1rem;}
.r_check{height: 2em;line-height: 2em;}



.box1 .r_radio_warp label{display: inline;}
.box1 .r_radio_warp{height: 3rem;line-height: 3rem;}
.box3{width: 50%}
.box3 .r_btn_wrap{width: 50%;margin: 0 auto;}
.box4 .r_radio_warp{height: 3rem;line-height: 3rem;}
.box4 .r_radio_warp label{display: inline;}
.box5 .r_btn_wrap{margin-top: 3rem;}
.box6 p{margin-bottom: 10px;}
.box7{width: 80%;height: 90%;}
.box7 .r_btn_wrap button{margin-right: 3rem;}
.box7 .r_number span{margin-left: 30px;}
.box7 .title{font-size: 22px;}
.box7 .describe{padding: 1rem 0;}
.box7 .table tr{height: 35px;}
.box7 .r_sub_header span{padding-right: 5rem;}
    
    </style> 
</head>
<body class="skin-blue">
<!-- header logo: style can be found in header.less -->
<#include "../header.html"/>

<div class="wrapper row-offcanvas row-offcanvas-left">
    <!-- Left side column. contains the logo and sidebar -->
    <#include "../menu.html"/>
    <aside class="right-side">
        <section class="content-header">
            <h1 >大货订单
                <!--<small><a href="#">返回</a></small>-->
            </h1>
            <div class="clear"></div>
            <ol class="ol_left">
                <li>当前位置：</li>
                <li><a href="#">大货订单</a></li>
                <li>> 订单详情</li>
            </ol>

        </section>
        <!-- Content Header (Page header) -->
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="box">
                        <div class="clearfix">
                            <span class="pull-left four-font">进度状态</span>
                        </div>
                        <div class="progressChart clearfix">
                            <div class="chart_item clearfix">
	                            <table class="table table-bordered">
	                            	<tr>
	                                    <th width="12%"></th>
	                        			<th width="11%">下达大货通知单</th>
	                        			<th width="11%">上传推码表</th>
	                        			<th width="11%">生产起始日</th>
	                        			<th width="11%">生产完成日</th>
	                        			<th width="11%">尾查</th>
	                        			<th width="11%">填写装箱单</th>
	                        			<th width="11%">收货时间</th>
	                        			<th width="11%">截止时间</th>
	                        		</tr>
	                        	</table>
                            </div>

                            
                            <#list productionOrderResult.productionPatternResults as productionPatternResult>
                            <div class="chart_item clearfix">
                                <div class="fl content_left">
                                    <img>
                                    <p>${productionPatternResult.code!}</p>
                                </div>
                                <div class="fr content_right clearfix">
                                    <table class="table table-bordered">
                                        <tr>
                                        <#list productionPatternResult.orderTaskFlows as orderTaskFlow>
                                            <td>
                                                <div class="unit3"></div>
                                                <div class="unit5"></div>
                                                <div class="unit">
                                                    <#if orderTaskFlow.action=='F300'>
                                                    <p>09月02日<br>14:20</p>
                                                    </#if>
                                                    <div class="unit unit2"></div>
                                                </div>
                                            </td>
                                          </#list>
                                          <#list productionPatternResult.orderTaskFlows as orderTaskFlow>
                                           
                                            <td>
                                                <div class="unit">
                                                    <#if orderTaskFlow.action=='F301'>
                                                    <p>09月02日<br>14:20</p>
                                                    </#if>
                                                    <div class="unit unit2"></div>
                                                </div>
                                            </td>
                                            </#list>
                                            
                                            <td>
                                                <div class="unit">
                                                    <p><#if productionPatternResult.produceStartdate??>${productionPatternResult.produceStartdate?string("MM月dd HH:mm")}</#if></p>
                                                    <div class="unit unit2"></div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="unit">
                                                     <p><#if productionPatternResult.produceEnddate??>${productionPatternResult.produceEnddate?string("MM月dd HH:mm")}</#if></p>
                                                    
                                                    <div class="unit unit2"></div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="unit">
                                                   <p><#if productionPatternResult.lastCheckTime??>${productionPatternResult.lastCheckTime?string("MM月dd HH:mm")}</#if></p>
                                                    
                                                    <div class="unit unit2"></div>
                                                </div>
                                            </td>
                                             <#list productionPatternResult.orderTaskFlows as orderTaskFlow>
                                           
                                            <td>
                                                <div class="unit">
                                                     <#if orderTaskFlow.action=='F303'>
                                                    <p>09月02日<br>14:20</p>
                                                    </#if>
                                                    <div class="unit unit2"></div>
                                                </div>
                                            </td>
                                             </#list>
                                            <#list productionPatternResult.encasements as encasement>
                                           
                                            <td>
                                                <div class="unit">
                                                    <p>09月02日<br>14:20</p>
                                            
                                                    <div class="unit unit2"></div>
                                                </div>
                                            </td>
                                             </#list>
                                             <#list productionPatternResult.orderTaskFlows as orderTaskFlow>
                                           
                                            <td>
                                                <div class="unit">
                                                     <#if orderTaskFlow.action=='F305'>
                                                    <p>09月02日<br>14:20</p>
                                                    </#if>
                                                    <div class="unit unit2"></div>
                                                </div>
                                            </td>
                                             </#list>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                           </#list>
                           
                            
                        </div>
                        <div class="clearfix">
                            <span class="pull-left four-font">订单详情</span>
                            <span class=" ">查看详细</span>
                        </div>
                        <table class="table table-bordered custormView">
                            <tr>
                                <td>订单号</td>
                                <td>${productionOrderResult.code!}</td>
                                <td>订单创建时间</td>
                                <td>${productionOrderResult.createAt?string("yyyy-MM-dd HH:ss")}</td>
                            </tr>
                            <tr>
                                <td>截止时间</td>
                                <td><#if productionOrderResult.enddate??>${productionOrderResult.enddate?string("yyyy-MM-dd")}</#if></td>
                                <td rowspan="2">客户合同</td>
                                <td rowspan="2">
                                    <span class="r_pic">合同照片</span>
	                    			<a href="javascript:" class="down"><i class="iconfont down-i"></i>下载客户合同</a>	
                                    <!-- <button class="btn btn-primary ml_10">下载客户合同</button> -->
                                </td>
                            </tr>
                            <tr>
                                <td>最终报价</td>
                                <td>/</td>
                            </tr>
                            <tr>
                                <td>客户需求</td>
                                <td colspan="3">${productionOrderResult.requirement!}</td>
                            </tr>
                        </table>
                        <div class="clearfix">
                            <span class="pull-left four-font">大型货款</span>
                        </div>
                        <div style="margin: 15px;" class="clearfix">
                                    <span style="margin-right: 20px;">
                                        <input type="checkbox" />&nbsp;&nbsp;全选
                                    </span>
                            <button style="margin-right: 10px;" class="btn btn-primary">批量安排工厂</button>
                            <button style="margin-right: 10px;" class="btn btn-primary fr">下载生产通知单</button>
                            <button style="margin-right: 10px;" class="btn btn-primary fr">下载装箱单</button>
                            <button style="margin-right: 10px;" class="btn btn-primary fr">下载工厂合同</button>
                        </div>
                        <#list productionOrderResult.productionPatternResults as productionPatternResult>
                        <table class="table table-bordered custormView">
                            <tr>
                                <td colspan="2"  class="left-text">
                                    <input type="checkbox">
                                    <span>2016/11/17</span>
                                    <span>订单号：111111111111111111111</span>
                                    <a href="###" class="fr bule-border">查看明细</a>
                                    <span class="red fr record">待安排</span>
                                </td>
                            </tr>
                            <tr>
                                <td width="60%">
                                    <span class="Design_draft"><img src="../images/Design_draft_03.jpg" alt="" /></span>
                                </td>
                                <td class="rel">
                                    <i class="design-icon"></i>
                                    <div class="design-text">
                                        <p>设计编号：<span>${productionPatternResult.code!}<span></p>
                                        <p>款号：<span>${productionPatternResult.patternNo!}</span></p>
                                        <p>年份：<span>${productionPatternResult.period!}</span></p>
                                        <p>季节：<span>${productionPatternResult.season!}</span></p>
                                        <p>性别：<span>${productionPatternResult.sex!}</span></p>
                                        <span class="bule-border">淑女</span>
                                        <span class="bule-border">淑女</span>
                                        <span class="bule-border">淑女</span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" style="text-align: center; background: rgb(246,246,246);" class="clearfix left-text">
                                    <span class="fl">生产数量100件</span>
                                    <button class="btn btn-primary fr">安排工厂</button>
                                </td>
                            </tr>
                        </table>
                        </#list>
                       
                        <div>
                            <input type="checkbox">
                            <span class="m_15">全选</span>
                            <button class="btn btn-primary">批量安排工厂</button>
                        </div>
                    </div><!-- /.box -->
</div>
</div>
</section>

      

    </aside><!-- /.right-side -->
    <!-- Right side column. Contains the navbar and content of the page -->

</div><!-- ./wrapper -->


<!-- jQuery 2.0.2 -->
<script src="../js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="../js/AdminLTE/app.js" type="text/javascript"></script> 
</body>
<script type="text/javascript">

   
    var tw=$(".content_right .table").width();
    $(".unit3").width(tw)
    $(".unit5").width(tw)
</script>
</html>
